<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的常用指令</title>
    <script src="../js/vue.js"></script>
    <style>
        .first{
            color: red;
        }
        .second{
            font-size: 50px;
        }
    </style>
</head>
<body>
    
    <div id ="app">
        <!-- 1.{{}} mustache语法-->
        <p>{{msg}}</p>

        <!--2.v-once 只渲染1次-->
        <p v-once>{{msg}}</p>

        <!-- 3.v-pre 取消渲染-->
        <p v-pre>{{msg}}</p>

        <!--4.v-text 在DOM元素内部插入文本内容，v-text会更新DOM元素中原本的内容-->
        <p v-text="message">kitty{{msg}}</p>

        <!--5.v-html 指令用于输出元素的html内容，如果数据中包含html标签，将html标签解析后在输出-->
        <p v-html= "myhtml"></p>

        <!--6. v-bind 绑定属性-->
        <!--'v-bind:'可以简写成‘:’ 语法糖 就是简写-->
        <!--基本使用-->
        <a : href="myUrl">baidu</a>

        <!--v-bind还可以动态绑定class属性 对象语法 class里面是一个对象-->
        <p class="Third" v-bind:class="{first:isfirst,second:issecond}">{{msg}}111</p>
    </div>

   <script>
        let app = new Vue({
            el:"#app", 
            data:{  
                msg:'hello world',
                message:'hahaha',
                myhtml:"<h1>Amy</h1>",
                myhtml:'www.baidu.com',
                isFirst:true,
                isSecond:ture
                
            },
            methods:{
                getClass(){
                    return {first:this.isFirst,second:this.isSecond}
                }
            }
            
    })

   </script>
</body>
</html>